<template>
  <div class="profile-page">
    <div class="header">
      <div class="logo-section" @click="$router.push('/workspace')">
        <img src="../assets/img/logo.png" alt="金圣达" class="logo">
        <span class="brand-name">金圣达AI设计平台</span>
      </div>
      <div class="back-btn" @click="$router.push('/workspace')">
        <i class="el-icon-arrow-left"></i>
        返回工作台
      </div>
    </div>
    
    <div class="content-wrapper">
      <div class="sidebar">
        <div class="user-info">
          <div class="avatar-wrapper">
            <img :src="userAvatar" alt="用户头像" class="avatar">
            <div class="change-avatar">
              <i class="el-icon-camera"></i>
            </div>
          </div>
          <div class="user-name">{{ userName }}</div>
          <div class="user-role">{{ userRole }}</div>
        </div>
        
        <div class="menu-list">
          <div 
            v-for="(item, index) in menuItems" 
            :key="index" 
            class="menu-item"
            :class="{ active: activeMenu === item.key }"
            @click="activeMenu = item.key"
          >
            <i :class="item.icon"></i>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
      
      <div class="main-content">
        <!-- 基本信息 -->
        <div v-if="activeMenu === 'basic'" class="section">
          <div class="section-title">基本信息</div>
          <el-form label-width="80px" class="form">
            <el-form-item label="用户名">
              <el-input v-model="userForm.name" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="userForm.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
                <el-radio :label="0">保密</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="个人简介">
              <el-input type="textarea" v-model="userForm.bio" placeholder="请输入个人简介" :rows="4"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveUserInfo">保存修改</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 会员信息 -->
        <div v-if="activeMenu === 'membership'" class="section">
          <div class="section-title">会员信息</div>
          
          <div class="membership-card">
            <div class="card-left">
              <div class="membership-type">{{ membershipInfo.type }}会员</div>
              <div class="membership-expire">{{ membershipInfo.expireText }}</div>
              <el-button type="primary" size="small" @click="$router.push('/workspace')" class="upgrade-btn">
                升级会员
              </el-button>
            </div>
            <div class="card-right">
              <div class="premium-icon">
                <i class="el-icon-trophy"></i>
              </div>
            </div>
          </div>
          
          <div class="membership-benefits">
            <div class="benefit-title">会员权益</div>
            <div class="benefits-grid">
              <div class="benefit-item" v-for="(benefit, idx) in membershipBenefits" :key="idx">
                <i :class="benefit.icon"></i>
                <div class="benefit-name">{{ benefit.name }}</div>
                <div class="benefit-desc">{{ benefit.desc }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 安全设置 -->
        <div v-if="activeMenu === 'security'" class="section">
          <div class="section-title">安全设置</div>
          
          <div class="security-item">
            <div class="item-left">
              <div class="item-title">修改密码</div>
              <div class="item-desc">定期修改密码可以保障账号安全</div>
            </div>
            <div class="item-right">
              <el-button size="small" @click="showChangePasswordDialog = true">修改</el-button>
            </div>
          </div>
          
          <div class="security-item">
            <div class="item-left">
              <div class="item-title">绑定手机</div>
              <div class="item-desc">已绑定：{{ userForm.phone }}</div>
            </div>
            <div class="item-right">
              <el-button size="small" @click="showBindPhoneDialog = true">修改</el-button>
            </div>
          </div>
          
          <div class="security-item">
            <div class="item-left">
              <div class="item-title">绑定邮箱</div>
              <div class="item-desc">已绑定：{{ userForm.email }}</div>
            </div>
            <div class="item-right">
              <el-button size="small" @click="showBindEmailDialog = true">修改</el-button>
            </div>
          </div>
          
          <div class="security-item">
            <div class="item-left">
              <div class="item-title">账号注销</div>
              <div class="item-desc">注销后，账号下的数据将被清除且无法恢复</div>
            </div>
            <div class="item-right">
              <el-button size="small" type="danger" @click="showDeleteAccountDialog = true">注销账号</el-button>
            </div>
          </div>
        </div>
        
        <!-- 消息通知 -->
        <div v-if="activeMenu === 'notification'" class="section">
          <div class="section-title">消息通知</div>
          
          <div class="notification-item" v-for="(item, idx) in notificationSettings" :key="idx">
            <div class="item-left">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-desc">{{ item.desc }}</div>
            </div>
            <div class="item-right">
              <el-switch v-model="item.enabled"></el-switch>
            </div>
          </div>
          
          <div class="notification-save">
            <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" :visible.sync="showChangePasswordDialog" width="400px">
      <el-form :model="passwordForm" label-width="100px">
        <el-form-item label="原密码">
          <el-input type="password" v-model="passwordForm.oldPassword" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input type="password" v-model="passwordForm.confirmPassword" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showChangePasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="changePassword">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProfilePage',
  data() {
    return {
      activeMenu: 'basic',
      userName: '张三',
      userRole: '个人会员',
      userAvatar: require('@/assets/avatar/布林.jpg'),
      
      menuItems: [
        { key: 'basic', label: '基本信息', icon: 'el-icon-user' },
        { key: 'membership', label: '会员信息', icon: 'el-icon-trophy' },
        { key: 'security', label: '安全设置', icon: 'el-icon-lock' },
        { key: 'notification', label: '消息通知', icon: 'el-icon-bell' }
      ],
      
      userForm: {
        name: '张三',
        email: 'zhangsan@example.com',
        phone: '138****6666',
        gender: 1,
        bio: '热爱设计和创作的产品经理'
      },
      
      membershipInfo: {
        type: '个人版',
        expireDate: '2024-12-31',
        expireText: '有效期至：2024年12月31日'
      },
      
      membershipBenefits: [
        { name: '多端同步', icon: 'el-icon-monitor', desc: '支持PC、移动端多平台同步' },
        { name: '文件无限制', icon: 'el-icon-document', desc: '无限制创建和存储文件' },
        { name: '高清导出', icon: 'el-icon-picture', desc: '支持高清图片、PDF导出' },
        { name: 'AI生成', icon: 'el-icon-cpu', desc: 'AI生成脑图、流程图' },
        { name: '团队协作', icon: 'el-icon-user', desc: '支持多人实时协作编辑' },
        { name: '版本历史', icon: 'el-icon-time', desc: '查看和恢复历史版本' }
      ],
      
      notificationSettings: [
        { title: '协作通知', desc: '当有人邀请你协作时通知你', enabled: true },
        { title: '评论通知', desc: '当有人评论你的文件时通知你', enabled: true },
        { title: '系统通知', desc: '接收系统更新、维护等通知', enabled: true },
        { title: '促销通知', desc: '接收优惠活动、新功能等通知', enabled: false }
      ],
      
      showChangePasswordDialog: false,
      showBindPhoneDialog: false,
      showBindEmailDialog: false,
      showDeleteAccountDialog: false,
      
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    saveUserInfo() {
      this.$message.success('个人信息保存成功');
    },
    
    saveNotificationSettings() {
      this.$message.success('通知设置保存成功');
    },
    
    changePassword() {
      if (!this.passwordForm.oldPassword || !this.passwordForm.newPassword || !this.passwordForm.confirmPassword) {
        this.$message.error('请填写完整信息');
        return;
      }
      
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.$message.error('两次输入的新密码不一致');
        return;
      }
      
      this.$message.success('密码修改成功');
      this.showChangePasswordDialog = false;
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f9f9f9;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    
    .logo-section {
      display: flex;
      align-items: center;
      cursor: pointer;
      
      .logo {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
      
      .brand-name {
        font-size: 18px;
        font-weight: 500;
        color: #333;
      }
    }
    
    .back-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #666;
      font-size: 14px;
      
      i {
        margin-right: 6px;
      }
      
      &:hover {
        color: #7239EA;
      }
    }
  }
  
  .content-wrapper {
    max-width: 1200px;
    margin: 30px auto;
    display: flex;
    
    .sidebar {
      width: 240px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 30px 0;
      margin-right: 20px;
      
      .user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 20px;
        
        .avatar-wrapper {
          position: relative;
          margin-bottom: 15px;
          
          .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
          
          .change-avatar {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 24px;
            height: 24px;
            background: #7239EA;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            
            i {
              font-size: 14px;
            }
          }
        }
        
        .user-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 5px;
        }
        
        .user-role {
          font-size: 13px;
          color: #999;
        }
      }
      
      .menu-list {
        .menu-item {
          padding: 12px 25px;
          display: flex;
          align-items: center;
          cursor: pointer;
          color: #666;
          transition: all 0.3s;
          
          i {
            font-size: 16px;
            margin-right: 10px;
          }
          
          &:hover {
            background: #f5f5f5;
            color: #7239EA;
          }
          
          &.active {
            background: #f0f2ff;
            color: #7239EA;
            font-weight: 500;
          }
        }
      }
    }
    
    .main-content {
      flex: 1;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 30px;
      
      .section {
        .section-title {
          font-size: 18px;
          font-weight: 500;
          color: #333;
          margin-bottom: 25px;
          padding-bottom: 10px;
          border-bottom: 1px solid #f0f0f0;
        }
        
        .form {
          max-width: 500px;
        }
      }
      
      .membership-card {
        background: linear-gradient(90deg, #7239EA 0%, #8F6EEB 100%);
        border-radius: 12px;
        padding: 25px;
        color: white;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        
        .card-left {
          .membership-type {
            font-size: 22px;
            font-weight: 500;
            margin-bottom: 10px;
          }
          
          .membership-expire {
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 15px;
          }
          
          .upgrade-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            
            &:hover {
              background: rgba(255, 255, 255, 0.3);
            }
          }
        }
        
        .card-right {
          display: flex;
          align-items: center;
          
          .premium-icon {
            font-size: 60px;
            opacity: 0.2;
          }
        }
      }
      
      .membership-benefits {
        .benefit-title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 20px;
        }
        
        .benefits-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          
          .benefit-item {
            background: #f5f5f5;
            border-radius: 8px;
            padding: 20px;
            transition: all 0.3s;
            
            &:hover {
              transform: translateY(-5px);
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            }
            
            i {
              font-size: 30px;
              color: #7239EA;
              margin-bottom: 15px;
            }
            
            .benefit-name {
              font-size: 16px;
              font-weight: 500;
              margin-bottom: 5px;
            }
            
            .benefit-desc {
              font-size: 13px;
              color: #666;
            }
          }
        }
      }
      
      .security-item, .notification-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .item-left {
          .item-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
          }
          
          .item-desc {
            font-size: 13px;
            color: #999;
          }
        }
      }
      
      .notification-save {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style> 